<template>
<div>
  <el-form :model="summaryForm" ref="summaryForm" label-width="100px">

      <el-select class="airline" style="width:180px"
                 v-model="summaryForm.airline"
                 filterable
                 allow-create
                 default-first-option
                 placeholder="航空公司">
        <el-option
            v-for="(item,index) in airCompanies"
            :key="index"
            :value="item.value">
        </el-option>

      </el-select>&nbsp;


    <el-select class="srcCity" style="width:180px"
               v-model="summaryForm.srcCity"
               filterable
               allow-create
               default-first-option
               placeholder="出发城市">
      <el-option
          v-for="(item,index) in cities"
          :key="index"
          :value="item">
      </el-option>

    </el-select>&nbsp;
    <el-select class="dstCity" style="width:180px"
               v-model="summaryForm.dstCity"
               filterable
               allow-create
               default-first-option
               placeholder="目的城市">
      <el-option
          v-for="(item,index) in cities"
          :key="index"
          :value="item">
      </el-option>
    </el-select>&nbsp;
    <el-select
       v-model="summaryForm.summaryTime"
        placeholder="选择时间范围">
      <el-option v-for="(item,index) in timeLength"
                 :key="index"
                 :value="item.time"
                 :label="item.chineseName">

      </el-option>
    </el-select>
    <el-button v-on:click="submitForm('summaryForm')"  type="primary" plain>统计</el-button>&nbsp;
    <el-button v-on:click="resetForm()">重置</el-button>
  </el-form>
  <el-table v-if="flights.length>0" :data="flights">
    <el-table-column
        prop="id"
        label="航班号">
    </el-table-column>
    <el-table-column label="路线" width="240">
      <template v-slot="scope">
        {{scope.row.srcAirport}}------->{{scope.row.dstAirport}}
      </template>
    </el-table-column>
    <el-table-column prop="startTime" label="出发时间" >
    </el-table-column>
    <el-table-column prop="seatCount" label="订票人数">
    </el-table-column>
    <el-table-column label="满座率">
      <template v-slot="scope">
        {{(scope.row.seatCount/scope.row.seatNum)*100|numFilter}}%
      </template>
    </el-table-column>
  </el-table>





</div>
</template>

<script>
export default {
  name: "summaryFlight",
  data(){
    return {
      flights:[],
      cities:[],
      timeLength:[
        {time:-7,chineseName:'过去一周'},
        {time:-15,chineseName:'过去半月'},
        {time:-30,chineseName:'过去一月'},
        {time:-180,chineseName:'过去半年'},
        {time:-365,chineseName:'过去一年'},
        {time:7,chineseName:'将来一周'},
        {time:15,chineseName:'将来半月'},
        {time:30,chineseName:'将来一月'}

      ],
      summaryForm:{
        airline:'',
        srcCity:'',
        dstCity:'',
        summaryTime:''
      },
      airCompanies: [{
        value: '东方航空',
      }, {
        value: 'SCAU航空',
      }, {
        value: '南方航空',
      }, {
        value: '东方航空',
      }, {
        value: '邮政航空',
      }, {
        value: '国际航空',
      }, {
        value: '联合航空',
      }, {
        value: '大新华航空 '
      }, {
        value: '飞龙航空 '
      }
      ],
    }
  },
  methods:{
    submitForm(formName){
      const _this=this

      this.$refs[formName].validate((valid)=>{
        if(valid){
          this.$axios.post('http://localhost:8181/flight/flightStatistics',this.summaryForm)
              .then(function(resp){
                _this.flights=resp.data
                console.log(_this.flights)
              })
        }

      })
    },
    resetForm(){
      this.summaryForm.airline=null;
      this.summaryForm.srcCity=null;
      this.summaryForm.dstCity=null;
      this.summaryForm.summaryTime=null;
    },
  },

  created(){
    const _this=this
    this.$axios.get("http://localhost:8181/flight/loadCity")
        .then((resp)=>{
          _this.cities=resp.data
        })

  },
  filters: {
    numFilter (value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2)
      return realVal
    }
  }

}
</script>

<style scoped>

</style>